<template>
  <div class="star-good-list-outer-outer">
    <div class="star-good-list-outer">
      <div class="star-good-list-title">
        My Favourite
      </div>
      <div v-if="state.starGoodList!=null&&state.starGoodList.length>0"  style="width: 100%;box-sizing: border-box;">
        <a-row style="width: 100%;box-sizing: border-box;" type="flex" justify="start" :gutter="[10,10]">
          <a-col v-for="good in state.starGoodList" :xs="12" :sm="8" :xl="6" :key="good.id" style="box-sizing: border-box;">
            <good-card @refresh="()=>{}" @click="toGoodPage(good.id)" style="box-sizing: border-box;" :goodInfo="good"></good-card>
          </a-col>
        </a-row>
        <div style="margin-top: 10px;display: flex;align-items: center;justify-content: center;">

          <a-pagination
              class="show-min-576px"
              v-model:current="state.current"
              :page-size-options="pageSizeOptions"
              :total="state.total"
              show-size-changer
              :page-size="state.pageSize"
              @showSizeChange="onShowSizeChange"
              @change="onPageChange"
              :defaultPageSize="12"
          >
            <template #buildOptionText="props">
              <span>{{ props.value }} item/page </span>
            </template>
          </a-pagination>
          <a-pagination
              class="show-max-576px"
              size="small"
              v-model:current="state.current"
              :page-size-options="pageSizeOptions"
              :total="state.total"
              show-size-changer
              :page-size="state.pageSize"
              @showSizeChange="onShowSizeChange"
              @change="onPageChange"
              :defaultPageSize="10"
          >
          </a-pagination>
        </div>
      </div>
      <div style="display: flex;flex-direction: column;align-items: center;margin-top: 100px;margin-bottom: 100px;" v-else>
        <a-empty :image="Empty.PRESENTED_IMAGE_DEFAULT">
          <template #description>
            <div class="good-list-font" imageStyle="">
              The content you searched has no results
            </div>
          </template>
        </a-empty>
      </div>

    </div>

  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {searchFavorite, searchFavoriteByPage} from '../../api/FavoriteRequest';
import {notification} from 'ant-design-vue';
import {Empty} from "ant-design-vue";
export default defineComponent({
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);

    const toGoodPage = (id: string) => {
      if (id == null) return;
      router.push({
        name: '商品页面',
        params: {
          id: id
        }
      })
    }

    const state = reactive({
      current: 1,
      pageSize: 12,
      total: 0,
      starGoodList: []
    })

    const toSearchStar = async () => {
      await searchFavoriteByPage({
        current: state.current,
        size: state.pageSize
      }).then((res) => {
        if (res.data.result != undefined) {
          if (res.data.result.current != null) state.current = res.data?.result?.current
          if (res.data.result.total != null) state.total = res.data?.result?.total
          if (res.data.result.size != null) state.pageSize = res.data?.result?.size
          //@ts-ignored
          if (res.data.result.records != null) state.starGoodList = res.data?.result?.records
        }
      }).catch((res) => {
        notification['success']({
          message: 'Action Success',
        });
      })
    }

    const onPageChange = async (val: string | number) => {
      if (typeof val === 'string') val = Number.parseInt(val)
      state.current=val;
      await toSearchStar();
    }

    const onShowSizeChange =async (current: number, pageSize: number | string) => {
      state.pageSize = typeof pageSize == 'number' ? pageSize : Number.parseInt(pageSize);
      await toSearchStar();
    };

    onMounted(()=>{
      toSearchStar();
    })

    return {
      toGoodPage,
      state,
      onShowSizeChange,
      onPageChange,
      pageSizeOptions,
      Empty
    }
  }
})
</script>

<style scoped lang="less">
.star-good-list-outer-outer {

  padding: 5px 20px;
  @media screen and(max-width: 768px) {
    padding: 5px 15px;
  }
  @media screen and(max-width: 576px) {
    padding: 5px 10px;
  }
  @media screen and(max-width: 425px) {
    padding: 0;
  }

  .star-good-list-outer {
    background-color: #f5f5f5;
    border-radius: 16px;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .star-good-list-title {
      padding: 10px 0 10px 0;
      font-weight: bold;
      font-size: 30px;

      @media screen and(max-width: 768px) {
        font-size: 30px;
      }
      @media screen and(max-width: 576px) {
        font-size: 30px;
      }
      @media screen and(max-width: 425px) {
        font-size: 30px;
      }

    }

  }
}

.show-max-576px {
  @media screen and (min-width: 576px) {
    display: none !important;
  }
}

.show-min-576px {
  @media screen and (max-width: 576px) {
    display: none !important;
  }
}
.good-list-font {
  display: inline-block;
  font-size: 20px;
  white-space: nowrap;
  line-height: 31.2px;
  @media screen and (max-width: 768px) {
    font-size: 17px;
    line-height: 24.8px;
  }
  @media screen and (max-width: 576px) {
    font-size: 14px;
    line-height: 25.6px;
  }

}
</style>
